<template>
  <view class="card-box" v-if="data.cardList && data.cardList.length > 0">
    <view class="card-box-title" v-if="data.cardContent">{{ data.cardContent }}</view>
    <view class="scroll-box" scroll-x>
      <view
        class="scroll-item"
        v-for="(item, index) in data.cardList"
        :key="index"
        @click="toDetail(item)"
        data-spmCntSuffix="ChatMessage.unifyCard@1.toDetail@"
        :data-custom="index+1"
        :data-spm="item"
      >
        <view class="item-box">
          <view class="img-box">
            <img
              class="item-img"
              :src="item.cardContent.mainPictureUrl"
              mode="aspectFill"
            />
            <view class="item-tips" v-if="item.cardContent.buyNum">
              <img class="address-icon" :src="item.cardContent.addressIcon" alt="" srcset="">
              <view class="tips">{{ item.cardContent.buyNum }}</view>
            </view>
            <img
              class="item-icon"
              v-if="item.cardContent.tagIconUrl"
              :style="{
                width: item.cardContent.tagIconStyle.width + 'rpx',
                height: item.cardContent.tagIconStyle.height + 'rpx',
              }"
              :src="item.cardContent.tagIconUrl"
            />
            <!-- 必玩图标 -->
            <img
              class="center-icon"
              v-if="item.cardContent.titleImgUrl"
              :src="item.cardContent.titleImgUrl"
              alt=""
            />
          </view>
          <view class="item-info">
            <view class="info-title omit1" v-if="item.cardContent.title">
              {{ item.cardContent.title }}
            </view>
            <view class="price-box" v-if="item.cardContent.priceInfo && item.cardContent.priceInfo.price">
              <view class="price-1 sm">{{ item.cardContent.priceInfo.currency }}</view>
              <view class="price-1">{{ item.cardContent.priceInfo.price }}</view>
              <view class="price-2">{{ item.cardContent.priceInfo.description }}</view>
            </view>
            <view v-if="item.cardContent.tag" class="tag-text omit1">{{
              item.cardContent.tag
            }}</view>
            <!-- cardType = 2 攻略 -->
            <img
              v-if="
                item.cardContent.cardType === 2 && item.cardContent.sourceUrl
              "
              :style="{
                width: item.cardContent.sourceStyle.width + 'rpx',
                height: item.cardContent.sourceStyle.height + 'rpx',
                marginTop: '5rpx',
              }"
              :src="item.cardContent.sourceUrl"
            />
          </view>
        </view>
      </view>
      <!-- hasMoreBtn 为true 时才展示更多 -->
      <view
        class="item-more"
        @click="moreClick"
        v-if="data.hasMoreBtn"
        data-spmCntSuffix="ChatMessage.unifyCard@1.moreBtn@"
        :data-spm="1"
        :data-custom="{ pos: '查看更多' }"
      >
        <view class="more-box">
          <view class="more-text">查看更多</view>
          <img
            src="https://cdn1.visiotrip.com/h5AndMini/2024-09-19/more-icon.png"
            class="more-icon"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          cardList: [],
        };
      },
    },
    conversationId: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  components: {},
  computed: {},
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    moreClick() {
      if (this.data.cardType === 1) {
        //旅拍
        this.$navTo("/packageUserCenter/pages/aigc/aigcHome", {}, "navigateTo");
      }
      if (this.data.cardType === 2) {
        let poiIdList = this.data.cardList.map((item) => {
          return item.actionClick.args.poiId;
        });
        //吃榜单
        this.$navTo(
          `/packageAI/pages/mapDetail/mapDetail`,
          {
            type: 1,
            conversationId: this.conversationId,
            poiIdList: poiIdList.join(','),
            recType: 2,
          },
          "navigateTo"
        );
      }
      if (this.data.cardType === 3) {
        //玩榜单
        this.$navTo("/packageAI/pages/aiPlay/aiPlay", {}, "navigateTo");
      }
      if (this.data.cardType === 4) {
        let supplierProductIdList = this.data.cardList.map(item => {
          return item.actionClick.args.productId
        })
        //酒店榜单
        this.$navTo("/packageAI/pages/aiHotel/aiHotel", {
          supplierProductIdList: supplierProductIdList.join(',')
        }, "navigateTo");
      }
      if (this.data.cardType === 5) {
        let poiIdList = this.data.cardList.map((item) => {
          return item.actionClick.args.poiId;
        });
        //逛榜单
        this.$navTo(
          `/packageAI/pages/mapDetail/mapDetail`,
          {
            type: 2,
            conversationId: this.conversationId,
            poiIdList: poiIdList.join(','),
            recType: 2,
          },
          "navigateTo"
        );
      }
      if (this.data.cardType === 6) {
        //攻略

        this.$navTo(
          "/packageAI/pages/strategyList/strategyList",
          {},
          "navigateTo"
        );
      }
    },
    toDetail(item) {
      console.log(item);
      let args = item.actionClick.args;
      let cardType = item.cardContent.cardType;
      console.log("cardType", cardType);
      let poiIdList = this.data.cardList.map((item) => {
        return item.actionClick.args.poiId;
      });
      //商品
      if (cardType === 1) {
        this.$productUrlJump(args, true);
      }
      //攻略
      if (cardType === 2) {
        uni.navigateTo({
          url: '/ai/pages/aiSecretDetail/index?articleId=' + args.articleId + '&hiddenChange=true'
        })
      }
      //旅拍
      if (cardType === 3) {
        this.jumpAiPhoto(item);
      }
      //美食
      if (cardType === 4) {
        // this.$navTo('/packageAI/pages/aiEat/aiEat',{poiId:args.poiId},"navigateTo")
        this.$navTo(
          `/packageAI/pages/mapDetail/mapDetail`,
          {
            type: 1,
            conversationId: this.conversationId,
            poiIdList,
            poiId: args.poiId,
            recType: 2,
          },
          "navigateTo"
        );
      }
      // 景点
      if (cardType === 5) {
        this.$productUrlJump(args, true);
      }
      //商场
      if (cardType === 6) {
        // this.$navTo('/packageAI/pages/aiShop/aiShop',{poiId:args.poiId},"navigateTo")
        // this.$navTo('/packageAI/pages/aiEat/aiEat',{poiId:args.poiId},"navigateTo")
        this.$navTo(
          `/packageAI/pages/mapDetail/mapDetail`,
          {
            type: 2,
            conversationId: this.conversationId,
            poiIdList: poiIdList,
            poiId: args.poiId,
            recType: 2,
          },
          "navigateTo"
        );
      }
    },
    //旅拍根据返回跳转
    jumpAiPhoto(item) {
      let args = item.actionClick.args;
      let url = args.jumpAddress;
      let urlObj = {};
      switch (args.aigcType) {
        case 1: // 写真
          urlObj = {
            packageId: args.packageId,
            packageName: args.packageName,
          };
          break;
        case 2: // 造型
          urlObj = {
            packageId: args.packageId,
            packageName: args.packageName,
          };
          break;
        case 3: // Vlog
          urlObj = {
            selectIndex: args.selectIndex,
          };
          break;
        case 4: // 穿越
          urlObj = {
            sceneId: args.sceneId,
          };
          break;
        default:
          urlObj = {
            packageId: args.packageId,
            packageName: args.packageName,
            sceneId: args.sceneId,
            selectIndex: args.selectIndex,
          };
          break;
      }
      this.$navTo(url, urlObj, "navigateTo");
    },
  },
};
</script>

<style lang="scss" scoped>
.card-box {
  // border-top: 2rpx solid rgba(228,228,244,0.5);
  margin: 24rpx 20rpx 0 20rpx;
}
.card-box-title{
  color:#131328;
  font-size:32rpx;
  padding:24rpx 0;
}
.scroll-box {
  width: 100%;
  margin-bottom: 24rpx;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  // border-radius: 16rpx;
  .scroll-item {
    width: 230rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin-right: 16rpx;
    min-height: 316rpx;
    .item-box {
      display: flex;
      flex-direction: column;
      width: 230rpx;
      position: relative;
      .img-box {
        width: 230rpx;
        height: 230rpx;
        border-radius: 16rpx;
        position: relative;
        .item-img {
          width: 230rpx;
          height: 230rpx;
          border-radius: 16rpx;
        }
        .type-box {
          position: absolute;
        }
        .item-tips {
          position: absolute;
          width: 230rpx;
          min-height: 42rpx;
          background: linear-gradient(
            180deg,
            rgba(19, 19, 40, 0) 0%,
            rgba(19, 19, 40, 0.6) 100%
          );
          border-radius: 0rpx 0rpx 16rpx 16rpx;
          bottom: 0;
          display: flex;
          align-items: center;
          // justify-content: flex-end;
          .address-icon{
            width: 24rpx;
            height: 24rpx;
            margin-right: 2rpx;
          }
          .tips {
            font-size: 20rpx;
            color: #ffffff;
            line-height: 20rpx;
            padding-right: 10rpx;
            max-width: 190rpx;
          }
        }
        .item-icon {
          position: absolute;
          left: 0;
          top: 0;
        }
        .center-icon {
          width: 113rpx;
          height: 56rpx;
          position: absolute;
          left: 50%;
          margin-left: -57rpx;
          top: 50%;
          margin-top: -28rpx;
        }
      }
      .item-info {
        flex: 1;
        padding: 0 14rpx;
        .info-title {
          color: $sl-color-black;
          font-size: 24rpx;
          margin: 9rpx 0 0 0;
          font-weight: 600;
          line-height: 34rpx;
        }
        .price-box {
          margin: 9rpx 0 0 0;
          display: flex;
          align-items: baseline;
          .price-1 {
            color: #f93f55;
            font-size: 24rpx;
            font-weight: 600;
            &.sm {
              font-size: 20rpx;
            }
          }
          .price-2 {
            color: #b5b5d2;
            font-size: 20rpx;
            margin-left: 2rpx;
          }
        }
        .tag-text {
          margin: 6rpx 0 0 0;
          color: #767697;
          font-size: 20rpx;
          line-height: 28rpx;
        }
      }
    }
  }
  .item-more {
    width: 120rpx;
    background: rgba(228,228,244,0.5);
    border-radius: 16rpx 0rpx 0rpx 16rpx;
    .more-box {
      width: 120rpx;
      height: 316rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .more-text {
        width: 48rpx;
        color: $sl-color-grey;
        font-size: 24rpx;
        margin-bottom: 6rpx;
      }
      .more-icon {
        width: 24rpx;
        height: 24rpx;
        margin-top: 6rpx;
      }
    }
  }
}
</style>
